import puppeteer from 'puppeteer';
import { segment } from 'oicq';

// 横屏渲染函数
export async function renderAndSendMsg(e, imageUrl, msgContent, title = '统计信息', subtitle) {
  logger.info('开始渲染横屏消息内容');

  let browser;
  try {
    browser = await puppeteer.launch({
      headless: true,
      args: [
        '--disable-gpu',
        '--disable-dev-shm-usage',
        '--disable-setuid-sandbox',
        '--no-first-run',
        '--no-sandbox',
        '--no-zygote',
        '--single-process',
      ],
    });
    const page = await browser.newPage();
    const customCSS = `
      <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');
        body {
          font-family: 'Roboto Slab', serif;
          background-image: url('${imageUrl}');
          background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
          color: #333;
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }
        .container {
          max-width: 600px;
          padding: 50px;
          background-color: rgba(255, 255, 255, 0.9);
          text-align: center;
        }
        .title, .subtitle, .message-content {
          background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
          -webkit-background-clip: text;
          color: transparent; /* 确保渐变背景正确渲染 */
          display: inline-block;
        }
        .title {
          font-size: 32px;
          font-weight: 700;
          margin-bottom: 10px;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .subtitle {
          font-size: 24px;
          font-weight: 400;
          margin-bottom: 20px;
        }
        .message-content {
          font-size: 20px;
          line-height: 1.5;
          white-space: pre-wrap;
        }
      </style>
    `;
    // 动态设置 subtitle 是否渲染
    await page.setContent(`
      <html>
        <head>${customCSS}</head>
        <body>
          <div class="container">
            <div class="title">${title}</div>
            ${subtitle ? `<div class="subtitle">${subtitle}</div>` : ''}
            <div class="message-content">${msgContent}</div>
          </div>
        </body>
      </html>
    `);

    await page.setViewport({ width: 1280, height: 720 }); // 保持横屏分辨率
    const screenshotBase64 = await page.screenshot({ encoding: 'base64', type: 'png' });

    await e.reply(segment.image(`base64://${screenshotBase64}`));

    logger.info('横屏消息内容渲染完成');
  } catch (error) {
    logger.error('渲染横屏消息内容时发生错误:', error);
    await e.reply(msgContent);
  } finally {
    if (browser) {
      await browser.close();
    }
  }
}

// 竖屏渲染函数
export async function renderAndSendMsgVertical(e, imageUrl, msgContent, title = '统计信息', subtitle) {
  logger.info('开始渲染竖屏消息内容');

  let browser;
  try {
    browser = await puppeteer.launch({
      headless: true,
      args: [
        '--disable-gpu',
        '--disable-dev-shm-usage',
        '--disable-setuid-sandbox',
        '--no-first-run',
        '--no-sandbox',
        '--no-zygote',
        '--single-process',
      ],
    });
    const page = await browser.newPage();
    const customCSS = `
      <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');
        body {
          font-family: 'Roboto Slab', serif;
          background-image: url('${imageUrl}');
          background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
          color: #333;
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }
        .container {
          max-width: 600px;
          padding: 50px;
          background-color: rgba(255, 255, 255, 0.9);
          text-align: center;
        }
        .title, .subtitle, .message-content {
          background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
          -webkit-background-clip: text;
          color: transparent; /* 确保渐变背景正确渲染 */
          display: inline-block;
        }
        .title {
          font-size: 60px;
          font-weight: 700;
          margin-bottom: 10px;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .subtitle {
          font-size: 50px;
          font-weight: 400;
          margin-bottom: 20px;
        }
        .message-content {
          font-size: 40px;
          line-height: 1.5;
          white-space: pre-wrap;
        }
      </style>
    `;
    // 动态设置 subtitle 是否渲染
    await page.setContent(`
      <html>
        <head>${customCSS}</head>
        <body>
          <div class="container">
            <div class="title">${title}</div>
            ${subtitle ? `<div class="subtitle">${subtitle}</div>` : ''}
            <div class="message-content">${msgContent}</div>
          </div>
        </body>
      </html>
    `);

    await page.setViewport({ width: 1080, height: 1920 }); // 保持竖屏分辨率
    const screenshotBase64 = await page.screenshot({ encoding: 'base64', type: 'png' });

    await e.reply(segment.image(`base64://${screenshotBase64}`));

    logger.info('竖屏消息内容渲染完成');
  } catch (error) {
    logger.error('渲染竖屏消息内容时发生错误:', error);
    await e.reply(msgContent);
  } finally {
    if (browser) {
      await browser.close();
    }
  }
}